<template>
  <div :style="{'margin-left': marginLeft}" class="related-business">
    <!-- 新建- 相关信息 -->
    <template v-if="showAdd">
      <CrmRelative
          v-if="showRelative"
          ref="crmrelative"
          v-model:visible="showRelative"
          :radio="false"
          :selected-data="relatedListData"
          :show-types="showTypes"
          @changeCheckout="checkInfos"/>
      <span v-if="showCRMPermission" class="add-btn" @click="showRelative = true">
        <i class="wk wk-l-plus"/>
        <span class="label">关联业务</span>
      </span>

    </template>
    <template v-for="(items, key) in relatedListData" :key="key">
      <div style="margin-top: 10px;">
        <RelatedBusinessCell
            v-for="(item, itemIndex) in items"
            :data="item"
            :cell-index="itemIndex"
            :type="key"
            :key="itemIndex"
            :show-foot="showFoot"
            @unbind="delRelevance"
            @detail="checkRelatedDetail(key, item)"/>
      </div>
    </template>

  </div>
</template>


<script setup>
// 相关信息 - 弹出框
import RelatedBusinessCell from '/src/views/oa/components/RelatedBusinessCell/index.vue'
import {useErpUserStore} from "../store/modules/usererp.js";
import {computed, onMounted, ref, watch} from "vue";
import CrmRelative from "components/CreateCom/CrmRelative.vue";

defineOptions({
  name: 'RelatedBusiness',
})

const props = defineProps({
  marginLeft: {
    type: String,
    default: '20px'
  },
  // 编辑时传递所有关联数据   关联联系人-contacts 关联客户-customer 商机-business 合同-contract
  allData: {
    type: Object,
    default: () => {
      return {
        contacts: [],
        customer: [],
        business: [],
        contract: []
      }
    }
  },
  // 展示取消关联
  showFoot: {
    type: Boolean,
    default: false
  },
  showAdd: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['checkInfos', 'unbind', 'checkRelatedDetail'])


const showTypes = ref(['customer', 'contacts', 'business', 'contract'])
// 相关信息信息
const relatedListData = ref({})
const showRelative = ref(false)

// 从store中拿到crm权限
const crm = computed(() => {
  const erpUserStore = useErpUserStore();
  return erpUserStore.crm
})

const showCRMPermission = computed(() => {
  return crm.value
})

watch(() => props.allData, () => {
  relatedListData.value = props.allData
})

onMounted(() => {
  // 编辑时勾选
  relatedListData.value = props.allData
})

function checkInfos(val) {
  relatedListData.value = val.data
  const relevanceAll = {}
  for (const key in val.data) {
    const list = val.data[key]
    relevanceAll[key + 'Ids'] = list.map(item => item[key + 'Id'])
  }
  emits('checkInfos', relevanceAll, val.data)
}

// 任务页面取消关联
function delRelevance(field, index, item) {
  emits('unbind', field, item, index)
}

function checkRelatedDetail(field, val) {
  val.key = val[field + 'Id'] || val.id
  emits('checkRelatedDetail', field, val)
}

</script>


<style scoped lang="scss">
.related-business {
  color: #777;
  font-size: 12px;
  margin: 10px 0;
}

// 添加btm
$btn-b-color: #f8faff;
$btn-color: #333333;
$btn-b-hover-color: #eff4ff;

.add-btn {
  margin-top: 8px;
  font-size: 12px;
  color: $btn-color;
  background-color: $btn-b-color;
  border-radius: $xr-border-radius-base;
  display: inline-block;
  padding: 3px 10px;
  cursor: pointer;

  .wk-l-plus {
    font-size: 12px;
  }
}

.add-btn:hover {
  color: $xr-color-primary;
  background-color: $btn-b-hover-color;
}
</style>
